<template>
  <div class="hjf-container">
    <h1>backdrop-filter</h1>
    <p>
      实现毛玻璃效果，可以通过使用 backdrop-filter（CSS
      中为毛玻璃量身定制的一个属性）
    </p>
    <p>
      在 CSS 中还有一个属性叫 filter，这两个属性在语法层面是相同的。filter
      是将效果用于元素自身，而 backdrop-filter 则是将效果用于元素的背景。
    </p>
    <p>先来看一下语法：</p>
    <pre
      class="language-css"
      tabindex="0"
    ><code class="language-css"><span class="token comment">/* 关键词值 */</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

<span class="token comment">/* 指向 SVG 滤镜的 URL */</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>commonfilters.svg#filter<span class="token punctuation">)</span></span><span class="token punctuation">;</span>

<span class="token comment">/* &lt;filter-function&gt; 滤镜函数值 */</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>2px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">brightness</span><span class="token punctuation">(</span>60%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">contrast</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">drop-shadow</span><span class="token punctuation">(</span>4px 4px 10px blue<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span>30%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">hue-rotate</span><span class="token punctuation">(</span>120deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">invert</span><span class="token punctuation">(</span>70%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">opacity</span><span class="token punctuation">(</span>20%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">sepia</span><span class="token punctuation">(</span>90%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">saturate</span><span class="token punctuation">(</span>80%<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/* 多重滤镜 */</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>filters.svg#filter<span class="token punctuation">)</span></span> <span class="token function">blur</span><span class="token punctuation">(</span>4px<span class="token punctuation">)</span> <span class="token function">saturate</span><span class="token punctuation">(</span>150%<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/* 全局值 */</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span>
<span class="token property">backdrop-filter</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
</code></pre>

    <br />

    <div>
      <h5>毛玻璃：</h5>
      <p>注意点：必须使元素或其背景至少部分透明。</p>
      <h6>效果：</h6>
      <div class="demo-container">
        <div class="card">这是毛玻璃效果这是毛玻璃效果</div>
      </div>
      <div>
        <h6>结构：</h6>
        <pre
          class="language-html"
          tabindex="0"
        ><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-container<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>这是毛玻璃效果这是毛玻璃效果<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre>
      </div>
      <div>
        <h6>容器和卡片样式：</h6>
        <div>使用 blur： <strong>backdrop-filter: blur(10px)</strong></div>
        <pre
          class="language-css"
          tabindex="0"
        ><code class="language-css"><span class="token selector">.demo-container</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>30vw<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../assets/images/backdrop-filter-demo.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
  <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
  <span class="token selector">.card</span><span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50% <span class="token punctuation">,</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 0 20px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>50px<span class="token punctuation">;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
    <span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>10px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">-webkit-backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>10px<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
      </div>
    </div>

    <br />

    <div>
      <h5>照片背景实现：</h5>
      <h6>效果：</h6>
      <div class="bkImg">
        <img src="../assets/images/backdrop-filter-demo.jpg" class="Img" />
      </div>
      <div>
        <h6>结构：</h6>
        <pre
          class="language-html"
          tabindex="0"
        ><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bkImg<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../assets/images/backdrop-filter-demo.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Img<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre>
      </div>
      <div>
        <h6>样式：</h6>
        <pre
          class="language-css"
          tabindex="0"
        ><code class="language-css"><span class="token selector">.bkImg</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>30vw<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../assets/images/backdrop-filter-demo.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
  <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
  <span class="token selector">&amp;::after</span> <span class="token punctuation">{</span>
    <span class="token property">backdrop-filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>50px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">.Img</span> <span class="token punctuation">{</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">max-height</span><span class="token punctuation">:</span> 90%<span class="token punctuation">;</span>
    <span class="token property">max-width</span><span class="token punctuation">:</span> 90%<span class="token punctuation">;</span>
    <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import "../assets/styles/base.css";
import "@/assets/markdown.less";
import "@/assets/prism.css";
</script>

<style lang="less">
.hjf-container {
  font-size: 16px;
  h1 {
    font-size: 2em;
    font-weight: 600;
    text-align: center;
    padding-bottom: 20px;
  }
  .demo-container {
    width: 100%;
    height: calc(30vw);
    position: relative;
    background: url(../assets/images/backdrop-filter-demo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    .card {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      padding: 0 20px;
      height: 50px;
      line-height: 50px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
  }
  .bkImg {
    background-color: #222;
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    height: calc(30vw);
    background: url(../assets/images/backdrop-filter-demo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    &::after {
      backdrop-filter: blur(50px);
      content: "";
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 0;
    }
    .Img {
      position: relative;
      max-height: 90%;
      max-width: 90%;
      z-index: 1;
    }
  }
}
</style>